<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<meta charset="UTF-8">
	<meta author="yinzhengsong">
	<title>表单验证</title>
	<style>
		.container{
			width:1200px;
			margin:200px auto;
			color: #401442;
		}
		.container>div{
			margin-bottom:6px;
		}
		input{
			display: inline-block;
			border:0;
			padding:0;
			margin:0;
		}
		#userName,#psd,#psd1{
			width:260px;
			height:34px;
			border:1px solid #ccc;
			padding:0 10px;
			font-size: 18px;
			color:#ccc;
			outline: none
		}
		.count{
			height:16px;
			line-height: 16px;
			font-size: 14px;
			color:#ccc;
			visibility: hidden;
			padding-left:160px;
		}
		label{

			display:inline-block;
			width:150px;
			text-align: right
		}
		.btn{
			display: inline-block;
			width:160px;
			height:40px;
			text-align:center;
			font-size:16px;
			line-height: 40px;
			background: #e4393c;
			color:#fff;
			margin-left:160px;
		}
		.strong p{
			margin-left: 158px;
			font-size: 0;
		}
		.strong p span{
			display: inline-block;
			font-weight: normal;
			font-style: normal;
			padding:0;
			margin:0;
			width:94px;
			height:20px;
			background: #f9d194;
			font-size: 13px;
			color:#fff;
			text-align: center;
			line-height: 20px;
		}
		.strong p span.hover{
			background: #f97101;
		}
		.strong p.active span:nth-child(2){
			background: #f97101;
		}
		.strong p.active1 span{
			background: #f97101;
		}
		.unmInfo{
			display: none;
			font-size: 14px;
			color:#888;
		}
		.warn{
			display: inline-block;
			width:22px;
			height:22px;
			background: url("../../../image/warn.png");
			background-repeat: no-repeat;
			background-size:22px 22px;
			vertical-align: top;
		}
		.right{
			display: inline-block;
			width:22px;
			height:22px;
			background: url("../../../image/right.png");
			background-repeat: no-repeat;
			background-size:22px 22px;
			vertical-align: top;
		}
		.cuo{
			display: inline-block;
			width:22px;
			height:22px;
			background: url("../../../image/cuo.png");
			background-repeat: no-repeat;
			background-size:22px 22px;
			vertical-align: top;
		}
		.psdInfo{
			display: none;
			font-size: 14px;
			color:#888;
		}
		.psd1Info{
			display: none;
			font-size: 14px;
			color:#888;
		}
		.btn-wrapper{
			margin-top: 15px;
		}
	</style>
	<link rel="shortcut icon" href="images/favicon.ico" />
	<link type="text/css" href="../../../css/css.css" rel="stylesheet" />
	<script type="text/javascript" src="../../../js/jquery-1.8.3-min.js"></script>
</head>
<body>
<div class="content">
	<div class="web-width">
		<div class="for-liucheng">
			<div class="liulist for-cur"></div>
			<div class="liulist for-cur"></div>
			<div class="liulist for-cur"></div>
			<div class="liulist"></div>
			<div class="liutextbox">
				<div class="liutext for-cur"><em>1</em><br /><strong>填写账户名</strong></div>
				<div class="liutext for-cur"><em>2</em><br /><strong>验证身份</strong></div>
				<div class="liutext for-cur"><em>3</em><br /><strong>设置新密码</strong></div>
				<div class="liutext"><em>4</em><br /><strong>完成</strong></div>
			</div>

			<form action="Pwd4.jsp" method="get" class="container">
				<div class="userName-wrapper">

				</div>
				<div class="count"></div>

				<div class="passWord-wrapper">
					<label for="psd">输入新密码密码:</label>
					<input type="password" id="psd">
					<span class="psdInfo"></span>
				</div>
				<div class="strong">
					<p class="fl">
						<span class="hover">弱</span>
						<span class="">中</span>
						<span class="">强</span>
					</p>
				</div>
				<div class="passWord1-wrapper">
					<label for="psd1">确认密码:</label>
					<input type="password" id="psd1" disabled="">
					<span class="psd1Info"></span>
				</div>
				<div class="btn-wrapper">
					<input type="button" class="btn" value="确认修改">
				</div>
			</form>
			</div>
			<script>
				function findStr(str,n){
					var temp=0;
					for(var i=0;i<str.length;i++){
						if(str.charAt(i)==n){
							temp++;
						};
					};
					return temp;
				};
				window.onload=function() {
					var userName=document.getElementById("userName");
					var psd=document.getElementById("psd");
					var psd1=document.getElementById("psd1");
					var unmInfo=document.getElementsByClassName('unmInfo')[0];
					var count=document.getElementsByClassName('count')[0];
					var psdInfo=document.getElementsByClassName('psdInfo')[0];
					var psd1Info=document.getElementsByClassName('psd1Info')[0];
					var fl=document.getElementsByClassName("fl")[0];
					var name_length=0;
					var reg=/[^\w\u4e00-\u9fa5]/g;
					var re_n=/[^\d]/g;
					var re_t=/[^a-zA-Z]/g


					psd.onfocus=function(){
						psdInfo.style.display="inline-block";
						psdInfo.innerHTML='<i class="warn"></i> 6-16个字符，请使用字母加数字或者符号';
					}
					psd.onkeyup=function(){
						if(this.value.length>5){
							fl.className="active";
							psd1.removeAttribute("disabled");
							psd1Info.style.display="inline-block";
							psd1Info.innerHTML='<i class="warn"></i> 再输入一次';
						}else{
							fl.className="";
							psd1.setAttribute("disabled","disabled");
							psd1Info.style.display="none";
							psd1.value="";
						}
						if(this.value.length>10){
							fl.className="active1";
						}else{
							fl.className="";
							psd1.value="";
						}

					}
					psd.onblur=function(){
						var m=findStr(this.value,this.value[0]);
						if(this.value==""){
							psdInfo.innerHTML='<i class="cuo"></i> 不能为空';
						}else if(m==this.value.length){
							console.log(1);
							psdInfo.innerHTML='<i class="cuo"></i> 请尽量不要使用相同的字符';
						}else if(this.value.length<6||this.value.length>16){
							psdInfo.innerHTML='<i class="cuo"></i> 长度应为6-16个字符';

						}else{
							psdInfo.innerHTML='<i class="right"></i> OK';
						}
					}

					psd1.onblur=function(){
						if(this.value!=psd.value){
							psd1Info.innerHTML='<i class="cuo"></i> 两次输入的密码不一致';
						}else{
							psd1Info.innerHTML='<i class="right"></i> OK';
						}
					}
				}
				function getLength(str){
					return str.replace(/[^\x00-xff]/g,"xx").length;
				}
			</script>
</body>
</html>